<template>
  <div>
    <div class="row1" ref="row1"></div>
    <div class="row2" ref="row2"></div>
    <div class="row3" ref="row3"></div>
  </div>
</template>

<script>
export default {
  methods: {
    initRow() {
      let row1 = this.$echarts.init(this.$refs.row1, "infographic");
      let row2 = this.$echarts.init(this.$refs.row2, "infographic");
      let row3 = this.$echarts.init(this.$refs.row3, "infographic");
      // 工作地点-工作岗位数量-分布图
      let optionForRow1 = {
        legend: {},
        tooltip: {},
        title: {
          text: "工作地点-工作岗位数量-分布图"
        },
        dataset: {
          source: [
            ["职位", "web前端", "java", "python", "c++"],
            ["成都", 4300, 3203, 2937, 3472],
            ["异地", 2900, 3203, 2551, 3472],
            ["杭州", 1239, 3203, 2825, 3472],
            ["上海", 3890, 3203, 2391, 3472],
            ["深圳", 2467, 3203, 2391, 3472],
            ["重庆", 4440, 3203, 2391, 3472]
          ]
        },
        xAxis: { type: "category" },
        yAxis: {
          max: 5000
        },
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" }
        ]
      };
      // 工作经验-线性图
      let optionForRow2 = {
        title: {
          text: "工作经验-线型图"
        },
        xAxis: {
          type: "category",
          data: ["0", "2", "4", "6", "8", "10"],
          name: "工作经验(单位：年)"
        },
        yAxis: {
          type: "value",
          name: "薪资水平(单位：K/月)"
        },

        series: [
          {
            data: [8, 15, 20, 25, 30, 40],
            type: "line"
          }
        ]
      };
      // 岗位分布图
      let optionForRow3 = {
        backgroundColor: "#2c343c",
        title: {
          text: "岗位占比",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc"
          }
        },
        labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)"
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        label: {
          color: "rgba(255, 255, 255, 0.3)"
        },
        tooltip: {
          trigger: "item"
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: "岗位",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "web前端" },
              { value: 310, name: "java" },
              { value: 274, name: "ptyhon" },
              { value: 235, name: "C++" },
              { value: 400, name: "运维" },
              { value: 300, name: "测试工程师" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          },
          {
            name: "学历要求",
            type: "pie",
            radius: "55%",
            center: ["75%", "50%"],
            data: [
              { value: 400, name: "本科" },
              { value: 200, name: "大专" },
              { value: 100, name: "博士" },
              { value: 210, name: "不限" },
              { value: 80, name: "高中" },
              { value: 270, name: "硕士" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          },
          {
            name: "公司类型",
            type: "pie",
            radius: "75%",
            center: ["25%", "50%"],
            itemStyle: {
              borderRadius: 8
            },

            data: [
              { value: 500, name: "民营" },
              { value: 80, name: "政府机关" },
              { value: 120, name: "外资" },
              { value: 200, name: "国企" },
              { value: 180, name: "合资" },
              { value: 200, name: "创业公司" },
              { value: 190, name: "事业单位" },
              { value: 300, name: "上市公司" },
              { value: 80, name: "非盈利公司" }
            ]
          }
        ]
      };
      optionForRow1 && row1.setOption(optionForRow1);
      optionForRow2 && row2.setOption(optionForRow2);
      optionForRow3 && row3.setOption(optionForRow3);
    }
  },
  mounted() {
    this.initRow();
  }
};
</script>

<style lang="scss" scoped>
@mixin container {
  padding: 20px;
  height: 350px;
}
.row1 {
  @include container;
}
.row2 {
  @include container;
}
.row3 {
  @include container;
}
</style>
